<template>
  <div>
    <div style="display: flex;">
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:64%;margin-right: 1%">
        <div slot="header">
          <span>{{ $t('团队今日效率排行榜') }}</span>
        </div>
        <Table :page="false" border :table-data="effectTableData" max-height="600px">
          <el-table-column :label="$t('排名')" align="center" prop="rank">
            <template slot-scope="{$index}">
              {{ (effectTableData.length + 1) - ($index + 1) }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('员工姓名')" align="center" prop="name"></el-table-column>
          <el-table-column :label="$t('待办数')" align="center" prop="notAudit"></el-table-column>
          <el-table-column :label="$t('已办数')" align="center" prop="processed"></el-table-column>
          <el-table-column :label="$t('处理率')" align="center" prop="disposeRate">
            <template slot-scope="{row}">
              {{ row.disposeRate }}%
            </template>
          </el-table-column>
          <el-table-column
              :label="$t('环比上一天效率')"
              align="center" prop="sequentialRate">
            <template slot-scope="{row}">
                <span v-if="row.sequentialRate || row.sequentialRate === 0">
                  <i v-show="row.sequentialRate !== 0"
                     :class="row.sequentialRate > 0 ? 'el-icon-top' : 'el-icon-bottom'"
                     :style="{color:row.sequentialRate > 0 ? '#0EC270' : '#FE6B6B'}"></i>
                   {{ row.sequentialRate }}%
                </span>
              <span v-else> - </span>
            </template>
          </el-table-column>
        </Table>
      </el-card>
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:35%">
        <div slot="header">
          <span>{{ $t('团队上周质量排行榜') }}</span>
        </div>
        <Table :page="false" border :table-data="qualityTableData" max-height="600px">
          <el-table-column :label="$t('排名')" align="center" prop="rank">
            <template slot-scope="{$index}">
              {{ (qualityTableData.length + 1) - ($index + 1) }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('员工姓名')" align="center" prop="name"></el-table-column>
          <el-table-column :label="$t('通过率')" align="center" prop="passRate">
            <template slot-scope="{row}">
              {{ row.passRate }} %
            </template>
          </el-table-column>
        </Table>
      </el-card>
    </div>
    <div style="margin-top: 15px;display: flex;">
      <el-card shadow="never" :body-style="{padding:'15px'}" style="width:64%;margin-right: 1%">
        <div slot="header">
          <span>{{ $t('曲线图') }}</span>
        </div>
        <div style="text-align: right">
          <el-radio-group v-model="chartsType" @change="getCharts" size="mini">
            <el-radio-button :label="1">{{ $t('近7天') }}</el-radio-button>
            <el-radio-button :label="2">{{ $t('近30天') }}</el-radio-button>
            <el-radio-button :label="3">{{ $t('近1年') }}</el-radio-button>
          </el-radio-group>
        </div>
        <ve-line height="400px" :data="chartsData" :extend="chartsExtend"
                 :settings="amountSettings"
                 ref="charts1"></ve-line>
      </el-card>
      <div style="width:35%;">
        <el-card shadow="never" :body-style="{padding:'10px'}">
          <div slot="header">
            <span>{{ $t('团队整体排名') }}</span>
          </div>
          <el-tabs v-model="rankActive" @tab-click="getRanking">
            <el-tab-pane :label="$t('处理率')" name="1"></el-tab-pane>
            <el-tab-pane :label="$t('通过率')" name="2"></el-tab-pane>
            <Table :page="false" border :tableColumn="rankTableColumn" :table-data="rankTableData">
            </Table>
          </el-tabs>
        </el-card>
        <el-card shadow="never" :body-style="{padding:'10px'}" style="margin-top: 15px">
          <div slot="header">
            <span>{{ $t('团队上周数据') }}</span>
          </div>
          <div style="text-align: center">
            <el-progress type="circle" :percentage="lastWeekPassRate"></el-progress>
            <p>{{ $t('上周通过率') }}</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fetchTeamDataWordRanking,
  fetchTeamDataQualityRanking,
  fetchTeamDataRanking,
  fetchTeamDataCharts,
  fetchTeamDataPassRate,
} from "@/api/order"
import VeLine from 'v-charts/lib/line.common'
import {formatMoney} from "@/utils/tools";

export default {
  name: "TeamData",
  components: {
    VeLine
  },
  props: {
    productName: {},
    type: {}
  },
  data() {
    return {
      effectTableColumn: [],
      effectTableData: [],
      rankTableColumn: [
        {label: this.$t('类别'), prop: 'typeName', align: 'center'},
        {label: this.$t('公司排名'), prop: 'companyRanking', align: 'center'},
      ],
      rankTableData: [],
      qualityTableData: [],
      qualityData: [],
      chartsType: 1,
      effectActive: '1',
      overViewData: {},
      qualityActive: '1',
      rankActive: '1',
      chartsExtend: {
        color: ['#F1B901'],
        series: {
          smooth: false
        },
        grid: {
          right: 30
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {}
        },
        tooltip: {
          formatter: (params) => {
            let res = '<div style="margin-bottom: 5px">' + params[0].axisValue + '</br>'
            for (let i = 0; i < params.length; i++) {
              res += params[i].marker + params[i].seriesName + ': ' + params[i].value[1] + '%' + '</br>'
            }
            return res + '</div>'
          }
        }
      },
      amountSettings: {
        yAxisName: [this.$t('单位') + '%'],
        labelMap: {
          time: this.$t('日期'),
          passRate: this.$t('整体通过率'),
        },
      },
      chartsData: {
        columns: ['time', 'passRate',],
        rows: []
      },
      lastWeekPassRate: 0
    }
  },
  watch: {
    productName() {
      this.getData()
    },
    type() {
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.getEffect()
      this.getQuality()
      this.getRanking()
      this.getCharts()
      this.getPassRate()
    },
    // 获取团队工作效率
    async getEffect() {
      const res = await fetchTeamDataWordRanking({
        productName: this.productName || null,
        type: this.type,
        pageNum: 1,
        pageSize: 100
      })
      if (res.code === 1) {
        const {list} = res.data
        this.effectTableData = list.sort((a, b) => {
          return a.disposeRate - b.disposeRate
        })
        console.log(this.effectTableData)
      }
    },
    // 获取团队上周工作质量排行榜
    async getQuality() {
      const res = await fetchTeamDataQualityRanking({productName: this.productName || null, type: this.type,})
      if (res.code === 1) {
        const {list} = res.data
        this.qualityTableData = list.sort((a, b) => {
          return a.passRate - b.passRate
        })
      }
    },
    // 获取团队整体排名
    async getRanking() {
      const res = await fetchTeamDataRanking({productName: this.productName || null, type: this.type,})
      if (res.code === 1) {
        // 获取处理率
        const handleRate = res.data.filter(item => {
          if (item.type === 1 || item.type === 2) {
            item.typeName = item.type === 1 ? this.$t('本周处理率') : this.$t('上周处理率')
          }
          return item.type === 1 || item.type === 2
        })
        // 获取通过率
        const passRate = res.data.filter(item => {
          if (item.type === 3 || item.type === 4) {
            item.typeName = item.type === 3 ? this.$t('本周通过率') : this.$t('上周通过率')
          }
          return item.type === 3 || item.type === 4
        })
        const data = this.rankActive === '1' ? handleRate : passRate
        this.rankTableData = data
      }
    },
    // 获取团队曲线图
    async getCharts() {
      const res = await fetchTeamDataCharts({productName: this.productName || null, type: this.chartsType,})
      if (res.code === 1) {
        this.chartsData.rows = res.data
      }
    },
    // 获取团队上周通过率
    async getPassRate() {
      const res = await fetchTeamDataPassRate({productName: this.productName || null, type: this.type,})
      if (res.code === 1) {
        this.lastWeekPassRate = res.data
      }
    },
  }
}
</script>

<style scoped lang="less">
.col {
  width: 16.6%;
  padding: 0 10px;
}

.page_col {
  background-size: 100% 100%;
  height: 120px;
  color: #fff;
  box-sizing: border-box;
  padding: 25px 0;

  .img {
    height: 49px;
    width: 49px;
  }
}
</style>
